<template>
  <div class="submission">
    <flexbox :gutter="0" wrap="wrap">
      <flexbox-item :span="1/2" v-for="(item, index) in typeList" :key="index">
        <div class="sub-item">
          <div class="sub-img">
            <img :src="item.icon" alt>
          </div>
          {{item.label}}
        </div>
      </flexbox-item>
    </flexbox>
    <div class="back-styl">
      <img src="../assets/image/形状-3_66.png" alt>
    </div>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
  name: 'submission',
  data () {
    return {
      typeList: [
        {
          icon: require('../assets/image/icon_23.png'),
          label: '美丽学堂'
        },
        {
          icon: require('../assets/image/icon_5.png'),
          label: '人生感悟'
        },
        {
          icon: require('../assets/image/icon_42.png'),
          label: '学习成长'
        },
        {
          icon: require('../assets/image/icon_90.png'),
          label: '专业交流'
        },
        {
          icon: require('../assets/image/icon_33.png'),
          label: '兴趣爱好'
        }
      ]
    }
  },
  components: {
    Flexbox,
    FlexboxItem
  }
}
</script>
<style lang="less" scoped>
  .submission {
    margin-top: 10px;
  }
  .sub-item {
    text-align: center;
    background-color: #fff;
    background-clip: padding-box;
    margin: 12px;
    padding: 22px 0;
    box-shadow: 0px 1px 5px 0px rgba(0, 63, 51, 0.2);
    border-radius: 10px;
    color: #333333;
  }
  .sub-img {
    width: 70px;
    height: 58px;
    margin: 0 auto;
    img {
      width: 100%;
      margin: 0 auto;
    }
  }
  .type-item {
    margin-top: 10px;
  }
  .back-styl {
    position: absolute;
    top: 0;
    z-index: -1;
    img {
      width: 100%;
    }
  }
</style>
